<template>
	<view class="energy-consumption-container">
		<view class="title">
			<view class="left-title">充放电量统计</view>
			<view class="btn">

			</view>
		</view>
		<view class="content">
			<l-echart ref="chartRef" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script setup>
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif
	import {
		day,
		month,
		year
	} from "@/utils/allData";

	import {
		ref,
		watch,
		onMounted,
		reactive,
		computed,

	} from "vue";
	const props = defineProps({
		modelData: {
			type: Object,
			default: () => ({}) // 明确标识未初始化状态
		}
	})
	const electricData = ref([])
	const chargeData = ref([])
	const xAisData = ref([])
	const option = {
		legend: {},
		grid: {
			left: '14%',
		},
		xAxis: {
			type: "category",
			data: day,
			// 不要刻度线
			axisTick: {
				show: false
			},
		},
		yAxis: {
			name: "kW",
			type: "value",
		},
		series: [{
				data: [],
				name: "放电量",
				type: "line",
				smooth: true,
				barWidth: 14, //柱状图柱子宽度
				itemStyle: {
					// 使用方法二的写法
					color: {
						type: "linear",
						x: 0, // 右
						y: 0, // 下
						x2: 0, // 左
						y2: 1, // 上
						colorStops: [{
								offset: 0,
								color: "#FFE8B9", // 0% 处的颜色
							},
							{
								offset: 1,
								color: "#FFC363", // 100% 处的颜色
							},
						],
					},
				},
			},
			{
				data: [],
				name: "充电量",
				type: "line",
				smooth: true,
				barWidth: 14, //柱状图柱子宽度
				itemStyle: {
					// 使用方法二的写法
					color: {
						type: "linear",
						x: 0, // 右
						y: 0, // 下
						x2: 0, // 左
						y2: 1, // 上
						colorStops: [{
								offset: 0,
								color: "#9FEFF4", // 0% 处的颜色
							},
							{
								offset: 1,
								color: "#38A6FF", // 100% 处的颜色
							},
						],
					},
				},
			},
		],
		tooltip: {
			// 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: "axis",
			backgroundColor: "rgba(32, 33, 36,.7)",
			borderColor: "rgba(32, 33, 36,0.20)",
			borderWidth: 1,
			textStyle: {
				// 文字提示样式
				color: "#fff",
				fontSize: "12",
			},
		},
	}
	const chartRef = ref(null);
	const formatData = () => {
		if (props.modelData && props.modelData?.cfdltj) {
			let resData = props.modelData?.cfdltj
			electricData.value = resData.map(item => item.fdl)
			chargeData.value = resData.map(item => item.cdl)
			option.series[0].data = electricData.value
			option.series[1].data = chargeData.value
			init()
		}
	}

	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(option);
	}
	onMounted(() => {

	})
	watch(() => props.modelData, (val) => {
		formatData();
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.energy-consumption-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-right: 30rpx;
				width: 260rpx;

				.line {
					width: 8rpx;
					background: #909090;
					border-radius: 8rpx;
				}


				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 50rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}
		}

		.content {
			.echart {
				width: 100%;
				height: 300px;
			}
		}
	}
</style>